<template>
  <div id="app">
    <el-container>
      <el-main>
        <div>
          <div class="cart">
            <el-table
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>

              <el-table-column width="150" align="center">
                <div class="demo-image__placeholder">
                  <div class="block">
                    <el-image :src="src">
                      <div slot="placeholder" class="image-slot"></div>
                    </el-image>
                  </div>
                </div>
              </el-table-column>

              <el-table-column
                prop="commodityName"
                label="商品名称"
                width="200"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="price"
                label="单价"
                align="center"
              ></el-table-column>

              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.inventory"
                    :min="1"
                    :max="scope.row.allInventory"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="total_warpper">
              <h3>共购买{{ totalNumber }}件商品</h3>
              <h3>合计(不含运费)：{{ totalPrice }}</h3>
            </div>
            <div style="margin-left: 900px">
              <el-button @click="giveMoney">结算</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

     

  
<script>
import {getCar} from "../api/order"
export default {
  name: "app",
  component: {},
  data() {
    return {
      editIsDialog: false, //编辑弹窗
      addIsDialog: false, //添加弹窗
      multipleSelection: [], //存放已选择的数据
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      formData: {
        commodityName: "",
        price: "",
        inventory: "",
        carComNum:0,
      },
      editData: {},
      formLabelWidth: "200",
      //表格中的数据
      tableData: [],
    };
  },
  mounted(){
    this.getCarInfo();
  },
  methods: {
    getCarInfo(){
      var userid = localStorage.getItem("userId");
      getCar(userid).then(({data})=>{
        this.tableData = data.data
        console.log(data.data);
      })
    },
    // 点击发生的变化
    handleSelectionChange(val) {
      this.multipleSelection = val; //给定义的数组赋值
    },
    handleDelete(index) {
      this.tableData.splice(index, 1); //删除表格的数据
    },
    // 回首页
    goCity() {
      this.$router.push("/");
    },
    giveMoney(){
      if(this.multipleSelection.length == 0){
        this.$message.error("未选择商品")
      }else{
      var str = JSON.stringify(this.multipleSelection)
      localStorage.setItem("multipleSelection",str);
      console.log(this.multipleSelection);
      this.$router.push("/pay");

      }

    }
  },
  // 通过computed计算属性及时改变
  computed: {
    // 总价
    totalPrice() {
      var price_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        price_total +=
          this.multipleSelection[i].price * this.multipleSelection[i].inventory;
      }
      return price_total;
    },
    // 总数
    totalNumber() {
      var number_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        number_total += this.multipleSelection[i].inventory;
      }
      return number_total;
    },
  },
  components: {},
};
</script>
 
<style scoped>
/* 商场首页 */
.goshoppingcity {
  cursor: pointer;
}
.el-header {
  background-color: #8ca8cc;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.header_title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}
.sub-title {
  line-height: 60px;
}

.cart {
  margin: 50px auto;
  width: 1000px;
  border-radius: 30px;
}
.group_btn {
  margin-bottom: 30px;
}
.addDialog .el-input {
  width: 90%;
}
.total_warpper {
  text-align: right;
  margin-top: 30px;
}
h3 {
  margin-top: 10px;
}
</style> 

<style scoped>
.cart .el-table td,
.cart .el-table th.is-leaf,
.cart .el-table--border,
.cart .el-table--group {
  border: none;
  cursor: pointer;
}
.cart .el-table::before {
  height: 0;
}
.el-input-number{
  width: 150px;
}
</style>